<template>
  <div class="shopping">
      <h3 class="title">购物车</h3>


<!-- 收货人 -->
<div class="name">
  <p>收货人：苏</p>
  <p>13535337057
  <van-icon name="arrow" /></p>
</div>
<div class="ip">
  收获地址：广东省广州市天河区珠吉
</div>

<p class="color"></p>
<!-- 优购生活馆 -->
<p class="life"><van-icon name="shop-o" />优购生活馆</p>



<!-- 主要 -->

<div class="main">
  <ul class="left">
    <li v-for="(item,index) in imgList " :key="index">
   <p> <van-icon name="checked" color="red" size="30"/></p> 
      <img :src="item.goods_small_logo">
    </li>
  </ul>

  <ul class="right">
  <li v-for="(item,index) in imgList " :key="index">
    <p class="text">{{item.goods_name}}</p>
  <div class="button">
  <span class="price">
   <span class="icon">￥</span> {{item.goods_price}}<span class="nor">.00 </span></span>
  <van-stepper  step="1"/>
  </div>
  </li>
  </ul>

</div>

<p class="bg"></p>

<div class="js">
  <div class="js_">
    <van-icon name="checked" color="red" size="30"/><span>全选</span>
  </div>
  <div class="center">
    <div class="heji">
      <h3>合计：￥0</h3>
      <p>包含运费</p>
    </div>
   <van-button type="primary">结算:</van-button>

  </div>
</div>



<!-- 底部 -->
<ul class="footer">
    <li>
        <a href="#">
        <p>
      <van-icon name="wap-home-o" size="50"/>
        </p>
      首页
       </a> 
    </li>
    <li>
        <a href="#">
        <p>
       <van-icon name="apps-o" size="50"/>
        </p>
      分类
       </a> 
    </li>
    <li>
        <a href="#" class="colors">
        <p>
    <van-icon name="shopping-cart"  size="50" color="red"/>
        </p>
      购物车
       </a> 
    </li>
    <li>
        <a href="#">
        <p>
      <van-icon name="contact" size="50"/>
        </p>
        我的
       </a> 
    </li>
</ul>

  </div>
</template>

<script>
import { getTextList } from '../api/shop'

export default {
 
  name:"Shopping",
  data(){
    return {
       imgList:[]
    }
  },
   created(){
     getTextList().then(res=>{
       this.imgList=res
       console.log(res);
     })
   }
}
</script>

<style scoped lang="less">
.title{
   width: 100%;
   height: 50px;
   background: #eb4450;
   color: #fff;
   text-align: center;
   line-height: 50px;
}

.name{
  width: 90%;
  height: 50px;
  margin: 0 auto;
 display: flex;
 justify-content: space-between;
 color: #333;
 font-size: 18px;
 line-height: 50px;
}
.ip{
  width: 90%;
  height: 50px;
  margin: 0 auto;
  color: #333;
 font-size: 18px;
 line-height: 50px;
}
.color{
  width: 100%;
  height: 20px;
  background: #eee;
}
.life{
  width: 100%;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid#999;
  font-size: 24px;
  color: #333;
  text-indent: 15px;

}
.main{
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;

 }
.left{    
     width:25%;
   
  }
  .left li{
    width: 100%;
      height:155px;
    padding-top: 45px;
      display: flex;
      align-items: center;
 
  }

  img{
       width: 160px;
       height: 160px;
       margin-left: 10px;
}
.right{
    width: 60%;
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
  }
.right li{
     width: 100%;
      height: 206px;
      margin-top: 10px;
      color: #333;
      padding-left: 30px;
}
.text{
    height: 135px;
    line-height: 30px;
    padding-top: 20px;

}
.icon{
  font-size: 16px;
}
.price{
  font-size: 24px;
  color: red;
}
.nor{
  font-size: 12px;
}
.button{
  display: flex;
  justify-content: space-between;
}

.bg{
  width: 100%;
  height: 80px;
  background:#eee;
}




.js{
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  .js_{
    width: 18%;
    text-align: center;
    line-height: 98px;
    i{
      margin-right:18%;
    }
    span{font-size:20px;}
  }
  .center{
    width: 50%;
    height: 98px;
    display: flex;
    justify-content: space-between;
    line-height: 98px;
    .heji{
      margin-top: 27px;
      line-height:22px;
      height: 44px;
    }
    button{
      margin-top: 17px;
      height: 64px;
      width:40%;
      background: #eb4450;
      border:none;
      font-size: 18px;
    }
  }
}
.footer{
   width: 100%;
   height: 50px;
   position:bottom;
   display: flex;
   justify-content: space-around;
   align-items: center;
  border-top:1px solid rgb(167, 148, 148);
  padding-top:10px

}
.footer li .colors{
    color:#ed4450
}
.footer li a{
   color:#333;
    font-size: 24px;
    margin-left: 10px;
}
</style>